<template>
	<view class="pages">
		<!-- 头部 -->
		<pagehead>
			{{inviteName?inviteName+'邀请您加入启航掌柜':'注册'}}
		</pagehead>
		
		<view class="">
			
			<view class="operateBox-tabs operateBox-tabs--top">
				<view class="title" v-if="inviteName">
					{{ inviteName }}邀请您加入启航掌柜
				</view>
				<!-- <view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" :src="IMAGE_STATIC+'/operate/icon-user.png'" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 0, showCloseBtn: name != '' }">
						<input type="text" placeholder="请输入用户昵称" v-model="name" placeholder-class="inputStyle"
						@blur="blurInput(0)"
						@focus="focusInput(0)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('name')">
								<image :src="IMAGE_STATIC+'/images/icon-clear.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view> -->
				<view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" :src="IMAGE_STATIC+'/operate/phone.png'" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: phone != '' }">
						<input type="number" placeholder="请输入手机号" v-model="phone" placeholder-class="inputStyle"
						@blur="blurInput(1)"
						@focus="focusInput(1)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('phone')">
								<image :src="IMAGE_STATIC+'/images/icon-clear.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" :src="IMAGE_STATIC+'/operate/password.png'" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 4, showCloseBtn: password != '' }">
						<input placeholder="请输入登录密码" placeholder-class="inputStyle" v-model="password"
						:password="!eyeShowHideArray[4].show"
						@blur="blurInput(4)"
						@focus="focusInput(4)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('password')">
								<image :src="IMAGE_STATIC+'/images/icon-clear.png'" mode="widthFix"></image>
							</view>
							<view class="operateBox-formBox-list-image__see" @click="toggleEyeStatus(4)">
								<image :src="eyeShowHideArray[4].show ? eyeShow : eyeHide" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" :src="IMAGE_STATIC+'/operate/password.png'" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 5, showCloseBtn: pay_password != '' }">
						<input placeholder="请输入交易密码" placeholder-class="inputStyle" v-model="pay_password"
						:password="!eyeShowHideArray[5].show"
						@blur="blurInput(5)"
						@focus="focusInput(5)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('pay_password')">
								<image :src="IMAGE_STATIC+'/images/icon-clear.png'" mode="widthFix"></image>
							</view>
							<view class="operateBox-formBox-list-image__see" @click="toggleEyeStatus(5)">
								<image :src="eyeShowHideArray[5].show ? eyeShow : eyeHide" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" :src="IMAGE_STATIC+'/operate/icon-code.png'" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 3, showCloseBtn: invite != '' }">
						<input type="text" placeholder="请输入邀请码" v-model="invite" placeholder-class="inputStyle"
						@blur="blurInput(3)"
						@focus="focusInput(3)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('invite')">
								<image :src="IMAGE_STATIC+'/images/icon-clear.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" :src="IMAGE_STATIC+'/operate/icon-code.png'" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 2, showCloseBtn: tuCode != '' }">
						<input type="number" placeholder="请输入图形验证码" v-model="tuCode" placeholder-class="inputStyle"
						@blur="blurInput(4)"
						@focus="focusInput(4)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('tuCode')">
								<image :src="IMAGE_STATIC+'/images/icon-clear.png'" mode="widthFix"></image>
							</view>
							<view class="operateBox-formBox-list-image__code" @click="getTucode()">
								<image class="tuCode" :src="img_io" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="operateBox-flex">
					<view class="operateBox-formBox-list-header">
						<image class="operateBox-formBox-list-icon" :src="IMAGE_STATIC+'/operate/icon-code.png'" mode=""></image>
					</view>
					<view class="operateBox-formBox-list" :class="{ 'operateBox-formBox-list-input--active': isFocus == 2, showCloseBtn: code != '' }">
						<input type="number" placeholder="请输入短信验证码" v-model="code" placeholder-class="inputStyle"
						@blur="blurInput(2)"
						@focus="focusInput(2)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('code')">
								<image :src="IMAGE_STATIC+'/images/icon-clear.png'" mode="widthFix"></image>
							</view>
							<view class="operateBox-formBox-list-image__code" @click="sendCode()">
								<text class="code">{{ remain }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="text-right" @tap.stop="$tools.jump('./forget')">
					已注册，<text class="red">下载app</text>
				</view> -->
				<view class="initBtn initBtn--top" @tap.stop="$u.throttle(confirm,1000)">提交注册</view>
				<view class="operateBox-btn">
					<view class="to-reg operateBox-btn-title" @tap.stop="$tools.jump('./login')">已有帐号？<text class="red">去登录</text></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
				name: '',
				phone: '',
				code: '',
				invite: '',
				password: '',
				re_password: '',
				pay_password: '',
				// 验证码
				remain: '获取验证码',
				isSend: true,
				time: 60,
				timer: null,
				isFocus: null,
				eyeShow: this.$url.assetsPath+'/imzges/icon-eye-open.png',
				eyeHide: this.$url.assetsPath+'/imzges/icon-eye-close.png',
				eyeShowHideArray: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
				isAgree: false,
				inviteName:'',
				// 图形验证码
				img_id:'',
				img_io:'',
				tuCode:''
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.invite){
				this.invite = options.invite
				this.inviteName = options.inviteName
			}
			this.getTucode()
		},
		onShow() {
			
		},
		methods: {
			confirm(){
				let that = this;
				// if (that.name == '' ) {
				// 	return that.$tools.toast('请输入用户昵称');
				// }
				if (that.phone == '' ) {
					return that.$tools.toast('请输入手机号');
				}
				if (that.phone.length!=11 || !/^((1[0-9])+\d{9})$/.test(that.phone)){
					return that.$tools.toast('请输入正确的手机号码！！！');
				}
				if (that.password == '' ) {
					return that.$tools.toast('请输入登录密码');
				}
				var reg = /^(?![0-7]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,30}$/;
				if(!reg.test(that.password)){
					return that.$tools.toast('请输入6-30位字母+数字的登录密码');
				}
				if (that.pay_password == '' ) {
					return that.$tools.toast('请输入交易密码');
				}
				var reg1 = /^\d{6}$/;
				if(!reg1.test(that.pay_password)){
					return that.$tools.toast('请输入6位数字交易密码');
				}
				if (that.invite == '' ) {
					return that.$tools.toast('请输入邀请码');
				}
				if (that.tuCode == ''){
					return that.$tools.toast('请输入图形验证码');
				}
				if (that.code == ''){
					return that.$tools.toast('请输入手机验证码');
				}
				// if (that.re_password == '' ) {
				// 	return that.$tools.toast('确认密码');
				// }
				// if (that.re_password != that.password ) {
				// 	return that.$tools.toast('两者密码不一致');
				// }
				// #ifdef MP-WEIXIN
				//先获取用户的信息
				uni.getUserInfo({
					desc: '登录的数据',
					success(ures) {
						console.log(ures, '返回的用户信息');
						//这个地方的用户信息无论登录成功失败都可以拿到，只是拿到用户的信息
						//在成功的回调中去使用微信登录
						uni.login({
							provider: 'weixin', //使用微信登录
							success(lres) {
								console.log(lres, '请求微信登录返回的数据');
								//我们要根据上面获取的code码去作为请求参数发送给后端
								var data = {
									nick_name:that.name,
									user_account:that.phone,
									invite_code:that.invite,
									login_password:that.$md5(that.password),
									pay_password:that.$md5(that.pay_password),
									sms_code:that.code,
									wechat_code: lres.code
								};
								console.log("data：",data);
								uni.showLoading({
									mask: true
								});
								that.$Ajax('/api/user/login/userRegister',data,res => {
									uni.hideLoading();
										if (res.success) {
											uni.setStorageSync('token', res.data.token);
											that.$tools.toastJump('注册成功','/pagesMain/index/index');
										}
										uni.hideLoading();
									}
								), err =>{
									uni.hideLoading();
								}
							}
						});
					}
				})
				// #endif
				// #ifdef H5 || APP-PLUS
				var data = {
					nick_name:that.name,
					user_account:that.phone,
					invite_code:that.invite,
					login_password:that.$md5(that.password),
					pay_password:that.$md5(that.pay_password),
					sms_code:that.code,
				};
				console.log("data：",data);
				uni.showLoading({
					mask: true
				});
				that.$Ajax('/api/user/login/userRegister',data,res => {
						if (res.success) {
							uni.setStorageSync('token', res.data.token);
							that.$tools.toastJump('注册成功','/pagesMain/index/index');
						}
						uni.hideLoading();
					}
				), err =>{
					uni.hideLoading();
				}
				// #endif
			},
			// 发送短信
			sendCode() {
				if (this.phone == '' ) {
					return this.$tools.toast('请输入手机号');
				}
				if (this.phone.length!=11 || !/^((1[0-9])+\d{9})$/.test(this.phone)){
					return this.$tools.toast('请输入正确的手机号码！！！');
				}
				if(this.tuCode ==''){
					return this.$tools.toast('请输入图形验证码');
				}
				if(this.isSend == true){
					uni.showLoading({
						title: '发送中',
						mask: true
					});
					var data = {
						user_account:this.phone,
						bus_type:'FrontRegister',
						img_id:this.img_id,
						img_code:this.tuCode,
					};
					console.log("data：",data);
					this.$Ajax('/api/common/smsCode/sendSmsCodeOnly',
					data,
					res => {
							this.$tools.toast('短信发送成功')
							this.isSend = false;
							this.remain = this.time + 's';
							this.timer = setInterval(() => {
								this.time--;
								this.remain = this.time + 's';
								if (this.time == 0) {
									clearInterval(this.timer);
									this.remain = '重新获取';
									(this.isSend = true), (this.time = 60);
								}
							}, 1000);
						}
					)
					uni.hideLoading();
				}
			},
			// 获取图形验证码
			getTucode(){
				const data={
					interface_type:'createImgCode'
				}
				this.$Ajax('/api/common/imgCode/createImgCode',data,res => {
					// console.log('data',res)
					if(res.success){
						this.img_id = res.data.img_id
						this.img_io = res.data.img_io
					}
				})
			},
			checkArgee(){
				this.isAgree = !this.isAgree;
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			toggleEyeStatus(index) {
				this.eyeShowHideArray[index].show = !this.eyeShowHideArray[index].show;
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/common/scss/register';
.header_bar{
	position: relative;
}
.pages{
	background: url($uni-static-dir+'/operate/login-bg.png') 100% no-repeat;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	min-height: 100vh;
	width: 100vw;
	padding-bottom: 40rpx;
}
.operateBox-tabs {
	margin-top: 300rpx !important;
	.title{
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(255,255,255,0.9);
		line-height: 48rpx;
		text-align: center;
	}
}
.initBtn{
	margin-top: 48rpx;
}
</style>